<template>
  <div id="timecontent" class="derOnlyOneContainer _containers" :style="{
    transformOrigin: 'top left',
    left: `${left}px`,
    top: `${top}px`,
  }">
    <!-- <div class="time_close" @click="close">
      <img :src="closeIcon" />
    </div> -->
    <div class="time_header">
      <el-radio-group v-model="show" @change="reset">
        <el-radio-button label="倒计时" />
        <el-radio-button label="计时器" />
      </el-radio-group>
    </div>
    <div v-if="show === '倒计时' && !status" class="time_box">
      <box :value="minute[0]" @changeValue="changeValue1" />
      <box :value="minute[1]" @changeValue="changeValue2" />
      <div class="time_box_2 time_box_text">:</div>
      <box :value="second[0]" @changeValue="changeValue3" />
      <box :value="second[1]" @changeValue="changeValue4" />
      <div class="time_box_2">
        <div class="time_box_timer" @click="addSecond(30)">30秒</div>
        <div class="time_box_timer" style="margin: 10px 0" @click="addMinute(1)">1分钟</div>
        <div class="time_box_timer" @click="addMinute(5)">5分钟</div>
      </div>
    </div>
    <div v-else class="time_box">
      <div class="time_box_text">{{ `${minute[0]} ${minute[1]} : ${second[0]} ${second[1]} ` }}</div>
    </div>
    <div class="time_bottom">
      <div class="time_bottom-CZ" @click="reset">
        <el-image :src="chongzhi" class="time_bottom-CZimg" />
        重置
      </div>
      <div class="time_bottom-KS" @click="start(status)">
        <div class="time_bottom-KSA">
          <el-image v-if="
            !status ||
            (minute[0] === '0' && minute[1] === '0' && second[0] === '0' && second[1] === '0' && show === '倒计时')
          " :src="zanting" class="time_bottom-KSimg" />
          <el-image v-else-if="status" :src="kaishi" class="time_bottom-KSimg" />
        </div>
      </div>
      <div v-if="status" class="time_bottom-QB" @click.stop="qpclick()">
        <el-image :src="fangda" class="time_bottom-QBimg" />
        全屏
      </div>
    </div>
    <Title title="计时器" @close="close" @getPosition="getPosition" />
    <el-dialog v-model="dialogVisible" width="100%" class="fullScreenDialog" :show-close="false" @click="dialigGB"
      :before-close="handleClose" :append-to-body="true">{{ `${minute[0]} ${minute[1]} : ${second[0]} ${second[1]} `
      }}</el-dialog>
  </div>
</template>

<script>
// import dayjs from 'dayjs';
import box from './time-box.vue';
import kaishi from '../../../assets/dingshiqi/kaishi.png';
import zanting from '../../../assets/dingshiqi/zanting.png';
import fangda from '../../../assets/dingshiqi/fangda.png';
import chongzhi from '../../../assets/dingshiqi/chongzhi.png';
import closeIcon from '../../../assets/teaching/close.svg';
import Title from '../panel/title.vue';

export default {
  components: { box, Title },
  data() {
    return {
      dialogVisible: false,
      kaishi,
      zanting,
      fangda,
      chongzhi,
      closeIcon,
      left: 0,
      top: 0,
      timer: null,
      minute: '00',
      second: '30',
      show: '倒计时',
      status: false,
      positionStatus: false,
    };
  },
  watch: {},
  created() { },

  methods: {
    dialigGB() {
      this.dialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    qpclick() {
      this.dialogVisible = true;
    },
    // Title 组件返回的 x, y值
    getPosition({ x, y }) {
      this.left = x;
      this.top = y;
    },
    close() {
      this.$emit('close');
    },
    addSecond(value) {
      this.minute = '00';
      this.second = `${value}`;
      // const second = Number(this.second);
    },
    addMinute(value) {
      this.minute = `0${value}`;
      this.second = '00';
      // const second = Number(this.second);
    },
    changeValue1(value) {
      // if (this.minute)
      if (value >= 0) {
        this.minute = `${value}${this.minute[1]}`;
      }
    },
    changeValue2(value) {
      if (value >= 0) {
        this.minute = `${this.minute[0]}${value}`;
      }
    },
    changeValue3(value) {
      if (value > 5) {
        this.second = `${0}${this.second[1]}`;
      } else if (value >= 0) {
        this.second = `${value}${this.second[1]}`;
      }
    },
    changeValue4(value) {
      if (value >= 0) {
        this.second = `${this.second[0]}${value}`;
      }
    },
    reset() {
      clearInterval(this.timer);
      this.status = false;
      this.minute = '00';
      this.second = this.show === '倒计时' ? '30' : '00';
    },
    start(status) {
      if (this.minute === '00' && this.second === '00' && this.show === '倒计时') {
        this.status = false;
        return;
      }
      if (status) {
        clearInterval(this.timer);
        this.status = !this.status;
        return;
      }
      this.status = !this.status;
      clearInterval(this.timer);
      // console.log();
      if (this.show === '倒计时') {
        this.timer = setInterval(() => {
          if (this.minute === '00') {
            if (this.second === '00') {
              // clearInterval(timer);
              clearInterval(this.timer);
            } else {
              const second = Number(this.second);
              if (second - 1 >= 10) {
                this.second = `${second - 1}`;
              } else {
                this.second = `0${second - 1}`;
              }
            }
          } else if (this.second === '00') {
            const minute = Number(this.minute);
            if (minute - 1 >= 10) {
              this.minute = `${minute - 1}`;
            } else {
              this.minute = `0${minute - 1}`;
            }
            this.second = '59';
          } else {
            const second = Number(this.second);
            if (second - 1 >= 10) {
              this.second = `${second - 1}`;
            } else {
              this.second = `0${second - 1}`;
            }
          }
        }, 1000);
      } else {
        this.timer = setInterval(() => {
          const second = Number(this.second);
          const minute = Number(this.minute);
          if (minute + 1 > 99) {
            // clearInterval(timer);

            clearInterval(this.timer);
            // console.log(this.timer);
            return;
          }
          if (second + 1 > 59) {
            this.second = '00';
            if (minute + 1 >= 10) {
              this.minute = `${minute + 1}`;
            } else {
              this.minute = `0${minute + 1}`;
            }
          } else if (second + 1 < 10) {
            this.second = `0${second + 1}`;
          } else {
            this.second = `${second + 1}`;
          }
        }, 1000);
      }
    },
  },
};
</script>
<style lang="scss">
.fullScreenDialog {
  text-align: center;
  cursor: pointer;
  background: #000;
  height: 100%;
  margin: 0px auto !important;
  text-align: center;

  .el-dialog__body {
    margin-top: 200px;
    font-size: 240px;
    color: #ffffff;
  }

  .el-icon-close {
    color: #fff;
  }
}
</style>
<style lang="scss" scoped>
._containers {
  width: 28em;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 0.875em;
  display: flex;
  flex-direction: column;

  .time_header {
    margin: 16px;
  }

  .time_box {
    height: 140px;
    margin: 0 20px;
    background: rgba(242, 242, 242, 1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    justify-content: space-evenly;

    .time_box_2 {
      margin-left: 14px;
      display: flex;
      flex-direction: column;

      .time_box_timer {
        cursor: pointer;
        width: 48px;
        height: 38px;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        font-size: 14px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #52595fff;
      }
    }

    .time_box_text {
      font-size: 80px;
      line-height: 120px;
      text-align: center;
    }
  }

  .time_bottom {
    margin-top: 20px;

    .time_bottom-CZ {
      cursor: pointer;
      float: left;
      margin: 20px 0 0 20px;

      .time_bottom-CZimg {
        width: 12px;
        height: 12px;
      }
    }

    .time_bottom-KS {
      cursor: pointer;
      float: left;
      margin-left: 112px;

      .time_bottom-KSA {
        text-align: center;
        line-height: 56px;

        .time_bottom-KSimg {
          width: 56px;
          height: 56px;
        }
      }
    }

    .time_bottom-QB {
      cursor: pointer;
      float: right;
      margin: 20px 20px 0 0;

      .time_bottom-QBimg {
        width: 12px;
        height: 12px;
      }
    }
  }
}
</style>
<style lang="scss">
._containers {
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #fff;
    background-color: #fc8b09ff;
    border-color: #fc8b09ff;
    -webkit-box-shadow: -1px 0 0 0 #fc8b09ff;
    box-shadow: -1px 0 0 0 #fc8b09ff;
  }

  .el-radio-button__inner:hover {
    color: #fc8b09ff;
  }
}
</style>
